<template>
	<view>
		<view class="scroll-container">
			<!-- 左侧的滑动区域 -->
			<scroll-view scroll-y="true" :style="{height:wh+'px'}" class="left-scroll">
				<view v-for="(item,i) in firstTree" :key="i" :class="['left-scroll-item',i==active?'active':'']" @click="activeChange(i)">{{item.name}}</view>
			</scroll-view>
			<!-- 右侧的滑动区域 -->
			<scroll-view scroll-y="true" :style="{height:wh+'px'}" class="right-scroll" :scroll-top="scrollTop">
				<view class="secondTree" v-for="(item2,i2) in secondTree" :key="i2">
					<view class="secondTree-title">/{{item2.name}}/</view>
					<view class="thirdTree">
						<view class="third-item" v-for="(item3 ,i3) in item2.children" :key="i3" @click="gotoDoctor(item3)">
							<image :src="item3.icon"></image>
							<text>{{item3.name}}</text>
						</view>
					</view>
				</view>
				
				
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
		// 将 badgeMix 混入到当前的页面中进行使用
		mixins: [badgeMix],
		data() {
			return {
				//当前设备可用的高度
				wh:0,
				active:1,
				firstTree:[
					
					{
						name:"神经外科"
					},
					{
						name:"神经内科"
					},
					{
						name:"消化科"
					},
					{
						name:"妇科"
					},
					{
						name:"神经外科"
					},
					{
						name:"神经内科"
					},
					{
						name:"消化科"
					},
					{
						name:"妇科"
					},
					{
						name:"神经外科"
					},
					{
						name:"神经内科"
					},
					{
						name:"消化科"
					},
					{
						name:"妇科"
					},
					{
						name:"神经外科"
					},
					{
						name:"神经内科"
					},
					{
						name:"消化科"
					},
					{
						name:"妇科"
					}
					],
		secondTree:[
					{
						name:"神经外科教授",
						children:[
							{
								icon:"/static/image/LYQ.jpg",
								name:"赖金明"
							},
							{
								icon:"/static/image/LYQ.jpg",
								name:"李源淇"
							}
						]
					},
					{
						name:"乳腺外科教授",
						children:[
							{
								icon:"/static/image/LYQ.jpg",
								name:"张大山"
							},
							{
								icon:"/static/image/LYQ.jpg",
								name:"张三封"
							}
						]
					},
					{
						name:"泌尿外科教授",
						children:[
							{
								icon:"/static/image/LYQ.jpg",
								name:"乔玉石"
							},
							{
								icon:"/static/image/LYQ.jpg",
								name:"于三疯"
							}
						]
					},
					{
						name:"胸外教授",
						children:[
							{
								icon:"/static/image/LYQ.JPG",
								name:"艾尼"
							},
							{
								icon:"/static/image/LYQ.JPG",
								name:"杨生"
							}
						]
					},
					{
						name:"肛肠外科教授",
						children:[
							{
								icon:"/static/image/LYQ.JPG",
								name:"江焕新"
							},
							{
								icon:"/static/image/LYQ.JPG",
								name:"孙盛同"
							}
						]
					},
					{
						name:"普通外科教授",
						children:[
							{
								icon:"/static/image/LYQ.JPG",
								name:"于浩"
							},
							{
								icon:"/static/image/LYQ.JPG",
								name:"张磊生"
							}
						]
					},
					{
						name:"血管外科教授",
						children:[
							{
								icon:"/static/image/LYQ.JPG",
								name:"王悦"
							},
							{
								icon:"/static/image/LYQ.JPG",
								name:"钱德勒"
							}
						]
					},
					{
						name:"肝胆胰外科教授",
						children:[
							{
								icon:"/static/image/LYQ.JPG",
								name:"吴迪飞"
							},
							{
								icon:"/static/image/LYQ.JPG",
								name:"赵武"
							}
						]
					}
				],
				//滚动条的值
				scrollTop:0
				}
				},
		onLoad() {
			const sysInfo =uni.getSystemInfoSync()
			console.log(sysInfo);
			this.wh=sysInfo.windowHeight;
			console.log(this.secondTree);
		},
		methods:{
			activeChange(i){
				this.active=i;
				console.log(this.active);
				// this.secondTree=this.secondTree[i].children;
				this.scrollTop = this.scrollTop===0?1:0;
				
			},
			gotoDoctor(item3){
				let token = uni.getStorageSync("token")
				console.log(token);
				if(!token){
					uni.$showMsg("请先去登录！！")
					setTimeout(()=>{
						uni.switchTab({
							url:"/pages/my/my"
						})
					},1500)
				}
				else{
					uni.navigateTo({
						url:'/subpkg/doctor/doctor?cid='+item3.id
					})
				}
				
			}
		}
	}
</script>

<style lang="less">
	.scroll-container{
		display: flex;
		.left-scroll{
			width: 120px;
			.left-scroll-item{
				background-color: #f7f7f7;
				line-height: 60px;
				text-align: center;
				font-size: 12px;
			}
			.active{
				background-color: #ffffff;
				position: relative;
				&::before{
					content: ' ';
					display: block;
					width: 3px;
					height: 30px;
					background-color:red;
					position: absolute;
					top: 25%;
					left:0;						
				}
			}
		}
.right-scroll{
			.secondTree-title{
				font-size: 12px;
				font-weight: bold;
				text-align: center;
				padding: 15px 0;
			}
			
		}	 
.thirdTree{
	display: flex;
	flex-wrap: wrap;
	.third-item{
		width: 33.33%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 10px;
		image{
			width: 60px;
			height: 60px;
		}
		text{
			font-size: 12px;
		}
	}
	
}
}

</style>
